<template>
  <main>
    <Form>
      <FormItem>
        <Input type="text" v-model="type.name" placeholder="分类名">
          <Icon type="ios-folder" slot="prepend"></Icon>
        </Input>
      </FormItem>
      <FormItem>
        <Select v-model="type.parentId" clearable  prefix="ios-folder-open" placeholder="父分类">
          <Option v-for="item in parentList" :value="item.value" :key="item.value">{{ item.label }}</Option>
        </Select>
      </FormItem>
      <FormItem>
          <Button type="success" @click="publish(isUpdate ? 'update' : 'publish')">
            {{ isUpdate ? '更新' : '保存' }}
          </Button>
          <Button type="default" onclick="window.history.go(-1)">返回</Button>
      </FormItem>
    </Form>
  </main>
</template>

<script>
import {
  findTypeById,
  saveType,
  updateType
} from 'service'
import { loading } from 'mixins/loading'

export default {
  name: 'TypePublish',
  mixins: [loading],
  data() {
    return {
      isUpdate: false,
      name: '',
      parentName: '',
      parentList: [],
      typeId: this.$route.params.id || 0,
      type: {
        id: 0,
        name: '',
        parentId: null
      }
    }
  },
  created() {
    if (this.typeId) {
      this.isUpdate = true
      this.getType()
    }
    this.getParents()
  },
  computed: {
    typeList() {
      return this.$store.getters['blog/types']
    }
  },
  methods: {
    async getType() {
      let res = await findTypeById(this.typeId)
      this.type = res.data.data
    },
    getParents() {
      var list = this.typeList
      var parents = []
      list.forEach(item => {
        var data = {value:0, label:''}
        if(item.blogCount === 0) {
          parents.push(data)
          parents[parents.length-1].value = item.id
          parents[parents.length-1].label = item.name
        }
      })
      this.parentList = parents
    },
    async publish(opt) {
      let validate = this.validate()
      if(validate) {
        this.openLoading('Saving~~')
        switch(opt) {
          case 'update': {
            let res = await updateType(this.type)
            if (res.data.flag) {
              this.$Message.success('分类更新成功~~')
              this.$router.push("/profile/type/manage")
            } else {
              this.$Message.error('出错了owo，保存失败...')
            }
            this.$Spin.hide()
            break
          }
          case 'publish': {
            let res = await saveType(this.type)
            if (res.data.flag) {
              this.$Message.success('分类保存成功~~')
              this.$router.push("/profile/type/manage")
            } else {
              this.$Message.error('出错了owo，保存失败...')
            }
            this.$Spin.hide()
            break
          }
        }
      }  
    },
    validate() {
      if (this.type.name.trim() === '') {
        this.$Message.warning('要输入分类名称哦~~')
        return false
      }
      return true
    }
  },
}
</script>

<style lang="scss">
main {
  max-width: 800px;
  .ivu-form {
    padding: 1rem;
    .ivu-select-prefix {
      width: 30px;
      height: 30px;
      line-height: 15px;
      background-color: #f8f8f9;
      border-right: 1px solid #dcdee2;
      border-radius: 4px 0 0 4px;
      i {
        padding-top: 8px;
        padding-left: 4px;
      }
    }
    .ivu-select-head-with-prefix {
      margin-left: 3px;
    }
    button.ivu-btn {
      float: right;
      margin: 0 0.2rem;
    }
  }
}

</style>